<template>
  <div class="box">
    <Row>
      <Col span="12">
        <Date-picker type="date" :options="options1" format="yyyy年MM月dd日" placeholder="请选择日期"></Date-picker>
      </Col>
      <Col span="12">
        <Date-picker type="daterange" :options="options2"></Date-picker>
      </Col>

      <Col span="12">
        <Date-picker type="datetime" :options="options1" format="yyyy年MM月dd日" placeholder="请选择日期"></Date-picker>
      </Col>
      <Col span="12">
        <Date-picker type="datetimerange" :options="options2"></Date-picker>
      </Col>
    </Row>


    <Date-picker
        :open="open"
        :value="value3"
        confirm
        type="date"
        @on-change="handleChange"
        @on-clear="handleClear"
        @on-ok="handleOk">
        <a href="javascript:void(0)" @click="handleClick">
            <Icon type="ios-calendar-outline"></Icon>
            <template v-if="value3 === ''">选择日期</template>
            <template v-else>{{ value3 }}</template>
        </a>
    </Date-picker>

    <Date-picker type="date" size="small" :options="options1" format="yyyy年MM月dd日" placeholder="请选择日期"></Date-picker>
    <Date-picker type="date" :options="options1" format="yyyy年MM月dd日" placeholder="请选择日期"></Date-picker>
    <Date-picker type="date" size="large" :options="options1" format="yyyy年MM月dd日" placeholder="请选择日期"></Date-picker>

  </div>
</template>

<script>
export default {
  data () {
    return {
      open: false,
      value3: '',
      options1: {
              shortcuts: [
                  {
                      text: '今天',
                      value () {
                          return new Date();
                      },
                      onClick: (picker) => {
                          this.$Message.info('点击了今天');
                      }
                  },
                  {
                      text: '昨天',
                      value () {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          return date;
                      },
                      onClick: (picker) => {
                          this.$Message.info('点击了昨天');
                      }
                  },
                  {
                      text: '一周前',
                      value () {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                          return date;
                      },
                      onClick: (picker) => {
                          this.$Message.info('点击了一周前');
                      }
                  }
              ]
          },
          options2: {
              shortcuts: [
                  {
                    text: '最近一周',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        return [start, end];
                    }
                  },
                  {
                    text: '最近一个月',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        return [start, end];
                    }
                  },
                  {
                    text: '最近三个月',
                    value () {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        return [start, end];
                    }
                  }
              ]
          
      }
    }
  },
  methods: {
    handleClick () {
        this.open = !this.open;
    },
    handleChange (date) {
        this.value3 = date;
    },
    handleClear () {
        this.open = false;
    },
    handleOk () {
        this.open = false;
    }
  }
}
</script>

<style scoped>
  .ivu-date-picker {
    width: 80%
  }
</style>